<template>
  <div>
    <input type="hidden" :name="name" />
    <a-avatar shape="square" class="cursor-pointer" @click="visible = true">
      <template #icon>
        <component :is="(ICons as any)[selected]" v-if="selected" />
      </template>
    </a-avatar>
    <a-modal @ok="confirm" width="60%" title="图标选择器" v-model:open="visible">
      <a-card :body-style="{ maxHeight: '70vh', overflowY: 'auto' }">
        <ul class="grid gap-y-12 lg:grid-cols-8 sm:grid-cols-6 icon-selector place-items-center">
          <li
            v-for="(item, key) in computedIcons"
            :key="key"
            class="system__icon"
            :class="{ active: selected === item }"
            @click="selectItem(item)"
            @dblclick="confirm"
          >
            <template v-if="typeof item === 'string'">
              <component class="text-[3rem]" :is="(ICons as any)[item]" />
            </template>
          </li>
        </ul>
      </a-card>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import * as ICons from '@ant-design/icons-vue';
const visible = ref(false);

const selected = defineModel<string>('selected');
const emit = defineEmits(['confirm']);
const props = defineProps<{
  name?: string;
}>();
const computedIcons = computed(() => {
  let objects = Object.keys(ICons);
  return objects.slice(0, objects.length - 4);
});
const selectItem = (icon: string) => {
  selected.value = icon;
};

const confirm = () => {
  emit('confirm', selected.value);
  visible.value = false;
};
</script>

<style lang="scss" scoped>
.icon-selector {
  li {
    width: 64px;
    height: 64px;

    text-align: center;
  }
  li.active {
    background-color: var(--primary) !important;
  }
}
</style>
